/**
 * 问卷调查（react 组件形式）
 * 需求：
 *  主题自选
 *  1. 问卷标题
 *  2. 问卷内容
 *   - 单选题
 *   - 多选题
 *   - 问答题
 *  3. 提交按钮
 *
 * 逻辑要求：
 *  1. 问卷标题：显示问卷标题
 *  2. 问卷内容：显示问卷内容
 *  3. 提交按钮：提交问卷
 *
 * 提示：
 *   问卷内容使用 tdesign-react 提供的 Form 组件, 导入方式为 import { Form } from 'tdesign-react'
 *   单选题使用 tdesign-react 提供的 Radio 组件, 导入方式为 import { Radio } from 'tdesign-react'
 *   多选题使用 tdesign-react 提供的 Checkbox 组件, 导入方式为 import { Checkbox } from 'tdesign-react'
 *   问答题使用 tdesign-react 提供的 Input 组件, 导入方式为 import { Input } from 'tdesign-react'
 *   提交按钮使用 tdesign-react 提供的 Button 组件, 导入方式为 import { Button } from 'tdesign-react'
 *   时间使用 moment 中的 format 格式化方法
 *
 * 后续要求：
 *  把问卷的答案保存到 nedb 数据库中
 */

/**
 * 调查问卷举例：
 *
 * 主题：程序员日常生活调查
 *
 * 问题一：你的工作时间是多少？ 单选：8h 9h 10h 12h及以上
 * 问题二：你的性别是什么？ 单选：男、女
 * 问题三：你有多少个对象？单选：1个 2个 3个 4个及以上
 * 问题四：你是前端还是后端？ 单选：前端、后端、全栈
 * 问题五：你最喜欢的编程语言是什么？ 多选：Java、C++、Python、JavaScript、C#、PHP、Ruby、Swift、Kotlin、Rust
 * 问题六：你最喜欢的游戏是什么？多选：王者荣耀、穿越火线、QQ飞车、英雄联盟、和平精英、阴阳师、魔兽世界
 * 问题七：你最喜欢的运动是什么？ 问答：
 * 问题八：你的工作地点是哪里？ 问答：
 */
import { useEffect, useState } from 'react'
import { MessagePlugin, Radio, Tabs } from 'tdesign-react'
import KeepAlive, { useAliveController } from 'react-activation'
import RenderQuestionnaire from './RenderQuestionnaire'
import { apis, ApiRequest } from '@/service'

const {
  practiceService: {
    insertAnswer, // 提交问卷
    getAnswer, // 获取已经提交的问卷结果
    getQuestionnaireList, // 获取所有问卷调查信息
    getUserList,
  }
} = apis

const { TabPanel } = Tabs

const WriteQuestionnaires = (props: any) => {

  const [currentUser, setCurrentUser] = useState<UserType>()
  const [tabKey, setTabKey] = useState<string>('questionnaire0')
  const [questionnaires, setQuestionnaires] = useState<QuestionnaireType[]>([])
  const [userList, setUserList] = useState<UserType[]>([])

  /**
   * 假数据
   */
  // const questionnaires1 = {
  //   title: '程序员普调',
  //   questionList: [
  //     {
  //       title: '你的工作时间是多少？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '8h',
  //           value: '1'
  //         },
  //         {
  //           label: '9h',
  //           value: '2'
  //         },
  //         {
  //           label: '10h',
  //           value: '3'
  //         },
  //         {
  //           label: '12h及以上',
  //           value: '4'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的性别是什么？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '男',
  //           value: '1'
  //         },
  //         {
  //           label: '女',
  //           value: '0'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你最喜欢的编程语言是什么？',
  //       type: 'checkbox',
  //       radioList: [
  //         {
  //           label: 'Java',
  //           value: '1',
  //         },
  //         {
  //           label: 'C++',
  //           value: '2',
  //         },
  //         {
  //           label: 'Python',
  //           value: '3',
  //         },
  //         {
  //           label: 'JavaScript',
  //           value: '4',
  //         },
  //         {
  //           label: 'C#',
  //           value: '5'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的工作地点是哪里？',
  //       type: 'input',
  //     }
  //   ],
  //   submitNumber: 0,
  // }

  // const questionnaires2 = {
  //   title: '学历调查',
  //   questionList: [
  //     {
  //       title: '你的最高学历是什么？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '专科',
  //           value: '1'
  //         },
  //         {
  //           label: '本科',
  //           value: '2'
  //         },
  //         {
  //           label: '硕士',
  //           value: '3'
  //         },
  //         {
  //           label: '博士',
  //           value: '4'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的专业是什么？',
  //       type: 'input',
  //     },
  //   ]
  // }

  // const questionnaires = [
  //   questionnaires1,
  //   questionnaires2
  // ]

  // const userList: userType[] = [
  //   {
  //     username: '青子',
  //     userId: '10086'
  //   },
  //   {
  //     username: '家宝',
  //     userId: '10010',
  //   }
  // ]

  // 初始化当前用户
  useEffect(() => {
    // setCurrentUser(userList[0])
    getQuestionnaireListFnc()
    getUserListFnc()
  }, [])

  const getQuestionnaireListFnc = () => {
    ApiRequest({ api: getQuestionnaireList }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        setQuestionnaires(data) // set完成之后应该做一件事，是什么事呢
      }
    })
  }

  const getUserListFnc = () => {
    ApiRequest({ api: getUserList }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        setUserList(data)
        setCurrentUser(data[0])
      }
    })
  }

  // 选择用户
  const onUserChange = (event: any) => {
    // 刚刚在尝试获取用户名 使用filter 方法筛选出与 event 相同的item，并将返回的数组的第一项赋值给 currentUser
    setCurrentUser(userList.filter((item: UserType) => item.userId === event)[0])
  }

  const renderQuestionnaire = () => {
    return questionnaires.map((item: any, index: number) => {
      return <TabPanel label={item.title} value={`questionnaire` + index} key={index}>
        <RenderQuestionnaire title={item.title} questionList={item.questionList} currentUser={currentUser} />
      </TabPanel>
    })
  }

  return <div className='write-questionnaires frame'>
    <div className='select-user-tips'>请选择用户</div>
    <Radio.Group value={currentUser?.userId} onChange={(event) => { onUserChange(event) }}>
      {userList.map((item: UserType) => {
        return <Radio value={item.userId} key={item.userId}>{item.userName}</Radio>
      })}
    </Radio.Group>
    <Tabs
      className='write-questionnaires-tabs'
      placement='top'
      size='medium'
      defaultValue={tabKey}
      onChange={(value) => { setTabKey(value as string) }}
    >
      {renderQuestionnaire()}
    </Tabs>
  </div>
}

const KeepAliveComponent = (props: any) => {
  return <KeepAlive key='questionaires-write-questionaires' name='questionaires-write-questionaires'>
    <WriteQuestionnaires {...props} />
  </KeepAlive>
}

export default KeepAliveComponent
